<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/public.css">
		<!-- 引入组件库 -->
		<script src="js/vue.v2.6.14.js .js"></script>
		<script src="js/index.js"></script>
		<script src="js/axios.v0.21.1.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 面包屑 -->
			<el-row>
			  <el-col :span="24">
				  <el-breadcrumb separator="/">
				    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				    <el-breadcrumb-item><a href="/">类别管理</a></el-breadcrumb-item>
				    <el-breadcrumb-item>添加类别</el-breadcrumb-item>
				  </el-breadcrumb>
			  </el-col>
			</el-row>
			<el-divider></el-divider>
			<el-row>
			  <el-col :span="12">
				  <el-form ref="form" size="small" :model="form" label-width="80px">
					<el-form-item label="类别名称">
					  <el-input v-model="form.typename"></el-input>
					</el-form-item>
					<el-form-item label="类别描述">
					  <el-input type="textarea" v-model="form.typedes"></el-input>
					</el-form-item>
				   
				    <el-form-item>
				      <el-button type="primary" @click="onSubmit"><i class="el-icon-s-promotion"></i> 立即创建</el-button>
				      <el-button><i class="el-icon-delete"></i> 取消</el-button>
				    </el-form-item>
				  </el-form>
			  </el-col>
			</el-row>
		</div>
	</body>
	<script>
		// 创建根实例
		new Vue({
			el: '#app',
			data: {
				form: {
				  	typename:'',
					typedes:''
				}
			},
			created() {
				this.loadTypeList();
			},
			methods: {
				loadTypeList() {
					axios.get(`/type`).then(response=>{
						this.typeList = response.data;
						console.log(response.data);
					});
				},
				onSubmit() {
					//将表单提交到后台
					axios.post('/type',this.form).then(response=>{
						if (response.data){
							this.$message.success("添加成功");
							setTimeout(function () {
								location.href='list-bigType.html';
							},1000);
						}else {
							this.$message.error("添加失败");
						}
					});
				}}
		})
	</script>

</html>
